<template>
    <div class="w344 h200 bgc-f br-8 p20 bsb m5">
        <!-- 头 -->
        <div class="fx1yc tc-8a">
            <span>天河xxx店</span>
            <div>
                <!-- 已完成
                <van-icon name="arrow" /> -->
                <van-icon name="delete-o" size="20" @click="remove(index)" />
            </div>
        </div>
        <!-- 时间 -->
        <span class="t12 mt10-b20 db">{{indata.time}}</span>
        <div class="w100p h70 fxsys">
            <!-- 图片 -->
            <div class="wh50 fxcyc ovh ml2" v-for="it,id in allImg" :key="id">
                <img class="h100p" :src="it" />
            </div>
            <!-- 价格 -->
            <div class="wh50 bgc-f mla fy4xc">
                <span class="t18-b tc-35">￥{{allprice}}</span>
                <span class="t12">共 {{allCount}} 件</span>
            </div>
        </div>
        <div class="w80 h30 bd-dca974 tc-dca974 fxcyc t14 mla" @click="skipGoods">再来一单</div>
    </div>
</template>

<script>
import { Icon, Dialog } from "vant";
export default {
    components: {
        VanIcon: Icon,
    },
    props: {
        indata: { type: Object, default: () => {} },
        index: {type:Number}
    },
    computed: {
        allprice() {
            return this.indata.goods.reduce((prev, item) => {
                return prev + item.price * item.count;
            }, 0);
        },
        allCount() {
            return this.indata.goods.reduce((prev, item) => {
                return prev + item.count;
            }, 0);
        },
        allImg() {
            return this.indata.goods
                .map((item) => {
                    return item.img;
                })
                .slice(0, 4);
        },
    },
    methods: {
        skipGoods() {
            this.$router.push("/Goods");
        },
        remove(index){
            
            Dialog.confirm({
                message: "是否要删除此订单？",
                width: "260px",
                confirmButtonColor: "#dca974",
            }).then(() => {
               this.$store.commit('removeOrder', index)
            });
        }
    }
};
</script>

<style lang='scss' scoped>
</style>